<div class="clr-row tpl-container">
  <div class="clr-row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
    <h3 class="header-title" id="create-template">
      {{'TEMPLATE.CREATE_TMP' | translate}}
    </h3>
  </div>
  <form #ngForm="ngForm" clrForm clrLayout="horizontal" style="width: 100%;">
    <wayne-collapse>
      <label class="label-level1" id="release-message">{{'TEMPLATE.RELEASE_MESSAGE' | translate}}</label>
      <clr-textarea-container>
        <label class="required">{{'TEMPLATE.RELEASE_EXPLAIN' | translate}}</label>
        <textarea clrTextarea name="description" [(ngModel)]="template.description" rows="3" style="width: 65%"
          required>
            </textarea>
        <clr-control-error>description is required</clr-control-error>
      </clr-textarea-container>
    </wayne-collapse>
    <wayne-collapse>
      <label class="label-level1">{{'TEMPLATE.RESOURCE_CONFIG' | translate}}</label>
      <clr-input-container>
        <label class="required">{{'TEMPLATE.TYPE' | translate}}</label>
        <input type="text" clrInput readonly [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.scaleTargetRef.kind">
      </clr-input-container>
      <div class="clr-form-control clr-row">
        <label class="required">{{'TEMPLATE.NAME' | translate}}</label>
        <div class="clr-control-container">
          <div class="clr-input-container">
            <wayne-select inputable name="deploy_name" [(ngModel)]="kubeResource.spec.scaleTargetRef.name" searchable [placeholder]="'PLACEHOLDER.CHOOSE' | translate">
              <wayne-option *ngFor="let deploy of deploys" [value]="deploy.name">{{deploy.name}}</wayne-option>
            </wayne-select>
          </div>
        </div>
      </div>
    </wayne-collapse>
    <wayne-collapse>
      <label class="label-level1">{{'TEMPLATE.SCHEDULING_CONFIG' | translate}}</label>
      <clr-input-container>
        <label class="required">{{'TEMPLATE.MIN_REPLICAS' | translate}}</label>
        <input type="number" clrInput [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.minReplicas">
      </clr-input-container>
      <clr-input-container>
        <label class="required">{{'TEMPLATE.MAX_REPLICAS' | translate}}</label>
        <input type="number" clrInput [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.maxReplicas">
      </clr-input-container>
      <clr-input-container>
        <label class="required">{{'TEMPLATE.CPU_THRESHOLD' | translate}}</label>
        <input type="number" clrInput [ngModelOptions]="{standalone: true}" [(ngModel)]="kubeResource.spec.targetCPUUtilizationPercentage">
      </clr-input-container>
    </wayne-collapse>
  </form>
</div>
<div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
  <button type="button" class="btn btn-outline" (click)="onCancel()">{{ 'BUTTON.CANCEL' | translate}}</button>
  <button type="button" class="btn btn-primary" (click)="onOpenModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{ 'BUTTON.SUBMIT' |
    translate}}</button>
</div>
<wayne-ace-editor (outputObj)="saveResourceTemplate($event)"></wayne-ace-editor>
